import React, {useEffect, useState, useRef,} from 'react'
import Swiper from 'swiper/js/swiper.js' // 引入js
import 'swiper/css/swiper.min.css' // 引入样式
import '@/style/intro.scss'
import LottiePlayer from 'lottie-web';

let devSwiper = null
function Intro(props) {
	const [devIndex, setDevIndex] = useState(0);
	const [year, setYear] = useState('2023');
	const href = window.location.href;
	const typeName = href.split('?type=') ? href.split('?type=')[1] : '';
	const ChildRef0 = useRef(null);
  	const ChildRef1 = useRef(null);
	const ChildRef2 = useRef(null);
  	const ChildRef3 = useRef(null);


    const initSwiper = () => {
		devSwiper = new Swiper('.dev-swiper', {
			loop: false,
			autoplay: false,//可选选项，自动滑动
			observer:true,
			observeParents:true,
			direction: 'vertical',
		})
	};
    useEffect(() => {
		loadAnimation();
		initSwiper();
		if (typeName) {
			scroll(typeName)
		}
		
	}, []);
	const scroll = (typeName) => {
		let element = document.getElementById(typeName)
		element.scrollIntoView({ block: 'center', behavior: 'smooth' })
	}
	const numFunc = () => {
		// 数字递增动画,当模块滚动到文案时展示动画
		ChildRef0.current.reset()
		ChildRef0.current.start()
		ChildRef1.current.reset()
		ChildRef1.current.start()
		ChildRef2.current.reset()
		ChildRef2.current.start()
		ChildRef3.current.reset()
		ChildRef3.current.start()
	}

	const loadAnimation = () => {
		// 使用fetch或axios等库来加载JSON文件（这里只是一个示例URL）
		fetch('/files/history.json') // 替换为你的JSON文件的实际路径或URL
			.then(response => response.json()) // 解析响应为JSON格式
			.then(data => {
			// 使用LottiePlayer加载动画数据并渲染到容器中（这里假设你有一个名为'animationContainer'的元素）
			const animationContainer = document.getElementsByClassName('historyYearBg')[0]; // 获取容器元素
			LottiePlayer.loadAnimation({ // 使用LottiePlayer加载动画数据并渲染到容器中
				container: animationContainer, // 指定容器元素
				renderer: 'svg', // 使用SVG渲染器（也可以使用'canvas'）
				autoplay: true, // 设置动画自动播放（可选）
				loop: false,
				animationData: data // 提供动画数据（从JSON文件中获取）
			});
			})
			.catch(error => {
			console.error('Error loading animation:', error); // 处理加载错误（可选）
			});
	};
	return (
		<>
			
			<div className="introBanner">
			</div>
			<div className="companyOverviewBox" id="overview">
				<div className="mainContent">
					<p className="boxTitle">公司简介</p>
					<div className="companyOverviewContent flexSpaceBetween">
						<div className="companyImage">
							<img src={require('@/images/intro/company.jpg')}></img>
						</div>
						<div className="companyBriefInfo">
							<p>丰源电力科技（涿州）有限公司成立于2008年，位于河北省保定市涿州市。是一家专业从事电工绝缘材料开发、设计和应用的民营企业。公司核心产品为SMC板、SMC/DMC模压制品、GPO-3产品、注塑制品、PC制品、膜切制品，及各种工程塑料的深加工制品。产品广泛应用于石油化工、电力、电气、 电子、机械等各个领域。 </p>
							<p>公司核心产品为SMC板、SMC/DMC模压制品、GPO-3产品、注塑制品、PC制品、膜切制品，及各种工程塑料的深加工制品。产品广泛应用于石油化工、电力、电气、 电子、机械等各个领域。</p>
						</div>
					</div>
				</div>
			</div>

			
		</>
		
	)
}
 
export default Intro